<template>
    <!-- 顶部导航 -->
    <van-nav-bar title="购物车" left-text="返回" left-arrow @click-left="onClickLeft" v-if="action == 'cart'" />
    <van-nav-bar title="购物车" v-else />

    <van-checkbox-group v-model="checkedArr" v-if="CartList.length > 0" ref="checkboxGroup">
        <van-swipe-cell v-for="item in  CartList" :key="item.id">
            <van-card
                :price="item.total"
                :title="item.product.name"
                class="goods-card"
            >
                <template #thumb>
                    <van-checkbox :name="item.id"></van-checkbox>
                    <img :src="item.product.cover_cdn" alt="">
                </template>
                <template #num>
                    <van-stepper v-model="item.pronum" theme="round" button-size="22" disable-input @change="onStepper(item.id,item.pronum)" />
                </template>

                <template #desc>
                    <span>商品单价：￥{{item.price}}</span>
                </template>
            </van-card>
            <template #right>
                <van-button square text="删除" type="danger" class="delete-button" />
            </template>
        </van-swipe-cell>
    </van-checkbox-group>

    <van-empty description="购物车空空如也" v-else />

    <van-submit-bar :price="total" button-text="提交订单" @submit="onSubmit" :class="action != 'cart' ? 'cart' : ''" v-if="CartList.length > 0">
        <van-checkbox v-model="checked" @click="onChecked" >
            <span>{{checked ? '取消全选' : '全选'}}</span>
        </van-checkbox>
    </van-submit-bar>


    <Tab v-if="!action" />
</template>
<script>
import {showNotify} from 'vant'
import Tab from '@/components/common/Tab.vue'
export default {
    created() {
        this.action = this.$route.query.action == 'cart' ? this.$route.query.action : ''

        this.getCartData()
    },
    components:{
        Tab
    },
    data() {
        return {
            action:'',
            checked:false,
            checkedArr:[],
            CartList:[],
            LoginUser:this.$cookies.get('LoginAuth')
        }
    },
    methods: {
        onSubmit()
        {
           if(this.checkedArr.length <= 0)
           {
                showNotify({
                    type:'warning',
                    message:'请选择要结算的商品'
                })

                return false
           }

           let ids = this.checkedArr.join(',')

           this.$router.push({path:'/product/cart/confirm',query:{ids:ids}})
        },
        onClickLeft()
        {
            this.$router.go(-1)
        },
        async getCartData()
        {
            let data = {
                busid:this.LoginUser.id
            }

            let result = await this.$api.CartIndex(data)

            if(result.code === 1)
            {
                this.CartList = result.data
            }
        },
        onChecked()
        {
            if(this.checkedArr)
            {
                this.$refs.checkboxGroup.toggleAll()
            }else{
                this.$refs.checkboxGroup.toggleAll(true)
            }
        },
        async onStepper(cartid,pronum)
        {
            let data = {
                busid:this.LoginUser.id,
                cartid:cartid,
                pronum:pronum,
            }

            let result = await this.$api.CartStepper(data)

            if(result.code === 1)
            {
                this.getCartData()
            }
        }
    },
    computed:{
        total()
        {
            if(this.checkedArr.length <= 0)
            {
                this.checked = false
                return 0
            }

            let total = 0

            for(let item of this.CartList)
            {
                if(this.checkedArr.includes(item.id))
                {
                    total += parseFloat(item.total)
                }
            }

            this.checked = true

            return total * 100
        }
    }
}
</script>
<style>
.cart{
    bottom: 50px;
}

.goods-card {
    margin: 0;
    background-color: white;
}

.delete-button {
    height: 100%;
}

.van-card__thumb{
    display: flex;
    width: auto;
}

.van-card__thumb img{
    width: 88px;
    margin-left: 10px;
}

</style>